<template>
  <div>
    <div class="title">
      <h1>{{ data.title }}</h1>
    </div>
    <div class="content">
      <md-editor style="width: 80%" v-model="data.content" preview-only />
    </div>
  </div>
</template>

<script setup>
// 2. 里面markdown编辑器 展示数据
import { reactive, ref, onMounted } from "vue";
import { DESCRIBE_BLOG } from "@/api/blog.js";
import { Message } from "@arco-design/web-vue";
import { useRouter } from "vue-router";
import MdEditor from "md-editor-v3";
import "md-editor-v3/lib/style.css";

// 获取router
const router = useRouter();
const blogId = router.currentRoute.value.query.id;

const data = ref({});
// 1. 请求会博客数据
const fectchBlogData = async () => {
  try {
    const resp = await DESCRIBE_BLOG(blogId);
    // 替换掉新的响应式对象
    data.value = reactive(resp);
  } catch (error) {
    // 反馈组件, 进行消息提醒
    Message.error({
      content: `查询文章: ${error.message}`,
      duration: 5000,
    });
  }
};

// 页面加载后，获取数据
onMounted(() => {
  fectchBlogData();
});
</script>

<style lang="css" scoped>
.title {
  display: flex;
  justify-content: center;
}

.content {
  display: flex;
  justify-content: center;
}
</style>
